from nicegui import ui

# 初始化页面，设置视口等适配手机端
ui.add_head_html(
    '<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">'
)
ui.add_head_html(
    '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
)


# 创建主内容区域
@ui.page("/")
def main_page():
    # 添加背景图片，需替换为实际图片链接
    with ui.element("div").classes("w-full h-screen bg-cover bg-center").style(
        "background-image: url('https://image.baidu.com/front/aigc?atn=aigc&fr=home&imgcontent=%7B%22aigcQuery%22%3A%22%22%2C%22imageAigcId%22%3A%224199096378%22%7D&isImmersive=1&pd=image_content&quality=1&ratio=3%3A4&sa=searchpromo_shijian_photohp_inspire&tn=aigc&top=%7B%22sfhs%22%3A1%7D&word=%E7%BE%8E%E4%B8%BD%E7%9A%84%E6%B5%B7%E8%BE%B9')"
    ):
        # 顶部背景区域，设置背景图和标题
        with ui.element("div").classes("w-full h-36 bg-cover bg-center relative"):
            # 标题居中显示，可根据实际替换背景图链接
            ui.label("工作台").classes(
                "absolute top-8 left-1/2 -translate-x-1/2 text-white text-lg font-bold"
            )
            # 右上角功能按钮，模拟小程序的...和摄像头
            with ui.element("div").classes("absolute top-5 right-3"):
                ui.icon("more_horiz").classes("text-white mr-2 cursor-pointer")
                ui.icon("fiber_manual_record").classes("text-white cursor-pointer")

        # 待办事项和通知提醒模块，使用弹性布局让其在一行显示，适配不同手机宽度
        with ui.row().classes("flex justify-around my-2"):
            with ui.card().classes("w-2/5 rounded-lg bg-white/80 backdrop-blur-sm"):
                ui.icon("assignment").classes("text-blue-700 mr-1")
                ui.label("0").classes("text-2xl font-bold inline-block")
                ui.label("待办事项").classes("mt-1")
            with ui.card().classes("w-2/5 rounded-lg bg-white/80 backdrop-blur-sm"):
                ui.icon("notifications").classes("text-blue-700 mr-1")
                ui.label("0").classes("text-2xl font-bold inline-block")
                ui.label("通知提醒").classes("mt-1")

        # 每日任务列表区域，可点击跳转（这里简单模拟）
        with ui.card().classes("m-2 rounded-lg"):
            with ui.row().classes("justify-between items-center p-2"):
                ui.label("每日任务列表").classes("text-base font-bold")
                # 修改为使用按钮包裹图标
                ui.button(on_click=lambda: print("进入任务列表")).props("flat").classes(
                    "cursor-pointer"
                )

        # 右下角功能按钮，垂直排列
        with ui.element("div").classes("fixed bottom-5 right-5 flex flex-col"):
            add_btn = ui.button("", icon="add")
            robot_btn = ui.button("", icon="android")
    # 将 footer 移到外层，使其成为页面内容的直接子元素
    with ui.footer().classes("bg-sky-500 border-t border-gray-200"):
        # 底部导航栏，使用 Tailwind CSS 的 flex 布局，让按钮水平排列
        with ui.row().classes("justify-around w-full"):
            ui.button("工作台", icon="home").classes(
                "bg-transparent border-none text-blue-700"
            ).on_click(lambda: print("切换到工作台"))
            ui.button("应用", icon="apps").classes(
                "bg-transparent border-none text-gray-600"
            ).on_click(lambda: print("切换到应用"))
            ui.button("项目", icon="folder").classes(
                "bg-transparent border-none text-gray-600"
            ).on_click(lambda: print("切换到项目"))


if __name__ in {"__main__", "__mp_main__"}:
    ui.run(port=80, title="手机端工作台", host="0.0.0.0")
